import React, { useEffect, useState } from "react";
import Card from "../../../../Components/Card/Card.tsx";
import { ISummer } from "../../../../interface/SummonerInfo.ts";
import style from "./SumInfoCard.module.scss";
import { Progress } from "antd";
import { RankStatus } from "../../../../interface/RankInfo.ts";
import RankItem from "./RankItem/RankItem.tsx";

const twoColors = { "0%": "#1fc9bb", "100%": "#87d068" };
interface SumInfo {
  curSum: ISummer;
  rankInfo: RankStatus[];
}
const SumInfoCard: React.FC<SumInfo> = (props: SumInfo) => {
  const [curSum, setCurSum] = useState<ISummer>({} as ISummer);
  const [rankInfo, setRankInfo] = useState([] as RankStatus[]);
  useEffect(() => {
    setCurSum(props.curSum);
    setRankInfo(props.rankInfo);
  }, [props]);
  const setProgress = (total: number, num: number): number => {
    const percentage = (num / total) * 100;
    return parseFloat(percentage.toFixed(2)); // 将结果四舍五入到两位小数
  };
  return (
    <>
      <Card>
        <div className={style.profile}>
          <img src={curSum.imgUrl} alt="" />
          <div className={style.sumInfo}>
            <div className={style.sumName}>{curSum.name}</div>
            <div className={style.lv}>
              <Progress
                percent={setProgress(curSum.xpNL, curSum.xpSL)}
                showInfo={false}
                strokeColor={twoColors}
                size={[100, 12]}
                className={style.progress}
              />
              <span className={style.level}>LV {curSum.lv}</span>
            </div>
          </div>
        </div>
        <div>
          {rankInfo.map((item: RankStatus) => {
            return <RankItem rank={item} key={item.name}></RankItem>;
          })}
        </div>
      </Card>
    </>
  );
};

export default SumInfoCard;
